<template>
  <div class="booklist">
    <nav>猜您喜欢</nav>
    <div class="bookcard">
      <div class="card" v-for="item in contentList" :key="item.authorId">
        <div class="image">
          <el-image :src="item.listImage" lazy></el-image>
        </div>
        <span>{{ item.bookNum }}本书</span>
        <h3>
          {{ item.floorTitle }}
        </h3>
        <div class="avatarline">
          <div class="avatar">
            <el-image :src="item.authorAvatar" lazy></el-image>
          </div>
          <div class="name">{{ item.authorName }}</div>
          <div class="readnum">{{ item.readNum }}</div>
        </div>
      </div>
    </div>
    <div class="loading" v-if="load == 0"><van-loading type="spinner" /></div>
    <div class="entey" v-if="show == 1">已经到底了~</div>
  </div>
</template>

<script>
export default {
  name: "BookList",
  data() {
    return {
      menus_type: 1,
      address: 1,
      load: 0,
      show:0,
      contentList: [],
    };
  },
  methods: {
    getHeight() {
      //当请求的type值为1的时候，才进行懒加载
      if (this.menus_type == 1) {
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
         
          
        let clientHeight = document.documentElement.clientHeight;
        let scrollHeight = document.documentElement.scrollHeight;
        this.load = 0;
        if (scrollTop + clientHeight >= scrollHeight) {
          //当到达底部时页数自增1
          let page = this.address++;
        
          if (page <= 10) {
            //拼接新的请求地址
            let address = `http://api.dangdang.com/jcomment/index/book_list_recommend?client_version=1.0&user_client=touch&permanent_id=20220501235652856029683321204085512&udid=ad4d8061ff4884ad9c4523bf4e99a6b3&timestamp=1651420834536&union_id=&unionId=&cv=1.0&ct=touch&ts=1651420834536&time_code=7eca2b6f2c1d50cfc876357e9eb4a732&tc=d27f516e5ed99b9c7f6a5b4815cd0f7e&page=${page}&pagesize=10&online=1&newlist=1`;
            //异步请求
            this.axios
              .get(address)
              .then((res) => {
                //status为200循环添加数据
                if (res.status === 200) {
                  setTimeout(() => {
                    this.load = 1;
                  }, 5000);
                  let list = res.data.data.contentList;
                  
                  list.forEach((item) => {
                    if (this.contentList.indexOf(item) == -1) {
                      this.contentList.push(item);
                    }
                  });
                  if (this.contentList.length >= 100) {
                    this.load = 1;
                    this.show = 1;
                  }
                }
              })
              .catch((error) => {
                console.log(error);
              });
          }else{
              this.load = 1;
          }
        }
      }
    },
  },
  mounted() {
   
      let timer;
      let flag = true;
      //监听scroll,调用getHeight函数
      window.addEventListener("scroll", this.getHeight);

      window.addEventListener(
        "scroll",
        () => {
          if (flag) {
          }
          flag = false;
          clearTimeout(timer);
          timer = setTimeout(() => {
            flag = true;
          }, 15);
        },
        true
      );
    

  },
  created() {},
};
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: normal;
  font-style: normal;
}

.booklist {
  height: auto;
  width: 96%;
  margin: 1rem 2%;
}

.booklist nav {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-weight: bold;
  background-color: #d7b27a;
  font-size: 0.4rem;
  color: white;
}

.bookcard {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.bookcard .card {
  width: 48%;
  height: 6.3rem;
  margin: 0.2rem 0.5%;
  padding-bottom: 0.6rem;
  border: 1px solid gainsboro;
  border-radius: 0.1rem;
}

.bookcard .card .image {
  height: 4rem;
  width: 100%;
  background-color: gray;
}

.bookcard .card .image .el-image {
  width: 100%;
  height: 100%;
}

.bookcard .card span {
  position: relative;
  background-color: #debe8d;
  top: -0.3rem;
  left: 0.3rem;
  color: white;
  padding: 0.05rem 0.05rem;
  text-align: center;
  border-radius: 0.1rem;
}

.bookcard .card h3 {
  width: 96%;
  margin: 0 2%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.bookcard .card .avatarline {
  display: flex;
  margin: 0.2rem;
  justify-content: space-around;
}

.bookcard .card .avatarline .avatar {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 100%;
  background-color: gold;
}

.bookcard .card .avatarline .avatar .el-image {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.bookcard .card .avatarline .name {
  width: 37%;
  height: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 0.7rem;
  margin-left: 0.1rem;
  color: gray;
}

.bookcard .card .avatarline .readnum {
  height: 0.7rem;
  line-height: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 0.1rem;
  color: gray;
}

.entey {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  color: gray;
  text-align: center;
}

.loading {
  width: 10%;
  height: 1rem;
  margin: 0 45%;
}
</style>
